<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2024-12-11 14:32:19
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2024-12-15 15:12:46
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\views\systemManage\userManage\userManage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="user">
    <SearchCard @onSearch="onSearch" @onReset="onReset">
      <el-form :model="UserForm" label-width="auto" :inline="true">
        <el-form-item label="账号">
          <pb-input v-model="UserForm.loginName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="姓名">
          <pb-input v-model="UserForm.userName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="联系电话">
          <pb-input v-model="UserForm.phoneNumber" placeholder="请输入角色名称" size="small" />
        </el-form-item>
      </el-form>
    </SearchCard>
    <pb-card padding="0px " class="flex-1">
      <ContentOperation>
        <pb-button size="small" plain @click="setisVisibleFn(true, 1, {})">+添加</pb-button>
      </ContentOperation>
      <pb-card>
        <!-- <div><button @click=setisVisibleFn(true)>确认</button></div> -->
        <pb-table :tableData="tableData" :column="column">
          <template #operation="{ row }">
            <div class="flex">
              <pb-button text class="mr-6" @click="setisVisibleFn(true, 2, row)">编辑</pb-button>
              <pb-button text class="mr-6">重置密码</pb-button>
              <pb-button text class="mr-6">禁用</pb-button>
              <!-- <pb-button text v-show="!row.isAdmin" @click="DeleteRoleFn(true,row)">删除</pb-button> -->
              <!-- <PopconfirmButton v-if="!row.isAdmin" @confirm="DeleteRoleFn(row)"></PopconfirmButton> -->
            </div>
          </template>
        </pb-table>
        <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize" @onChange="GetUserList"
          :total="pages.total"></pb-pagination>
      </pb-card>
    </pb-card>
    <pb-popup v-model="isVisible" :title="'新增'" @cancelFn="offisVisibleFn" @confirmFn="setUserData">
      <div>
        <el-form :model="AddUpdataFrom" label-width="auto" :inline="true">
          <el-form-item label="账号">
            <pb-input v-model="AddUpdataFrom.loginName" :disabled="AddOfUpdata == 'updata'" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="姓名">
            <pb-input v-model="AddUpdataFrom.userName" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="联系电话">
            <pb-input v-model="AddUpdataFrom.phoneNumber" placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item label="单位">
            <pb-input v-model="AddUpdataFrom.departmentName" placeholder="请输入单位" />
          </el-form-item>
          <el-form-item label="职务">
            <pb-input v-model="AddUpdataFrom.postName" placeholder="请输入职务" size="small" />
          </el-form-item>
        </el-form>
        <div><span>所属角色：</span></div>
        <div class="flex flex-wrap">
          <el-checkbox v-for="(item, index) in roleList" v-model="item.checked" :label="item.roleName" :key="index" />
        </div>
      </div>
    </pb-popup>
  </div>
</template>

<script lang="ts" setup>
  import { reqGetUserListApi, reqAdduserApi, GetRoleListApi, reqUserSaveRoleApi, reqUserSaveRoleListApi, reqUpdataUserApi } from '@/api/Newuser'

  const tableData = ref([])
  const column = [{

    key: 'loginName',
    name: '账号',
    width: 100,
  },
  {
    key: 'userName',
    name: '姓名',
    width: 150,

  },
  {
    key: 'departmentName',
    name: '单位',
    width: 120,

  },
  {
    key: 'postName',
    name: '职务',
    width: 100,

  },
  {
    key: 'roleNames',
    name: '角色',
    width: 180,

  },
  {
    key: 'phoneNumber',
    name: '联系电话',
    width: 180,

  },
  {
    key: 'createTime',
    name: '创建时间',


  },
  {
    slot: 'operation',
    name: '操作',
    width: 200,
  }]
  const roleList = ref([]) as any
  const UserForm = reactive({
    userName: '',
    loginName: '',
    phoneNumber: ''
  }) as any
  const pages = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })
  const AddUpdataFrom = reactive({
    userName: '',
    loginName: '',
    phoneNumber: '',
    departmentName: '',
    postName: ''
  })
  const userId = ref('')
  const roleSaveList = ref([]) as any
  const AddOfUpdata = ref('')
  const isVisible = ref(false)
  const offisVisibleFn = () => {
    isVisible.value = false
  }
  const setisVisibleFn = async (Bl: boolean, Tnums: number, row: any) => {
    await GetRoleListApi({}).then(res => {
      roleList.value = res.data.records
      roleList.value.map((el: any) => {
        el.checked = false
      })
    })
    if (Tnums == 1) {
      clearObjKey(AddUpdataFrom)
      AddOfUpdata.value = 'add'
    } else {
      console.log('2')
      AddOfUpdata.value = 'updata'
      userId.value = row.userId
      Object.assign(AddUpdataFrom, row)
      reqUserSaveRoleListApi({
        userId: userId.value
      }).then((Resq => {
        roleList.value.map((el: any) => {
          Resq.data.map((resqel: any) => {
            if (el.roleId == resqel) {
              el.checked = true
            }
          })
        })
      }))
    }
    isVisible.value = Bl
  }
  const setUserData = async () => {
    if (AddUpdataFrom.userName == '' || AddUpdataFrom.loginName == '' || AddUpdataFrom.phoneNumber == '' || AddUpdataFrom.postName == '' || AddUpdataFrom.departmentName == '') {
      return ElMessage.error({ message: '"请不要输入为空"', offset: 66 });
    }
    let flage = roleList.value.some((el: any) => el.checked)
    if (!flage) {
      return ElMessage.error({ message: '"请选择至少一个角色"', offset: 66 });
    }
    roleList.value.map((el: any) => {
      if (el.checked) roleSaveList.value.push(el.roleId)
    })
    if (AddOfUpdata.value == 'add') {
      const res: any = await reqAdduserApi(AddUpdataFrom)
      if (res.code == 2000) {
        reqUserSaveRoleApi({ userId: res.data, roleIds: roleSaveList.value }).then(ress => {
          GetUserList()
        })
      } else {
        return ElMessage.error({ message: res.msg, offset: 66 });
      }
    } else {
      const updataRes = await reqUpdataUserApi({
        "userId": userId.value,
        "userName": AddUpdataFrom.userName,
        "postName": AddUpdataFrom.postName,
        "departmentName": AddUpdataFrom.departmentName,
        "phoneNumber": AddUpdataFrom.phoneNumber,
      })
      reqUserSaveRoleApi({ userId: userId.value, roleIds: roleSaveList.value }).then(ress => {
        GetUserList()
      })
    }
    isVisible.value = false
  }
  const onSearch = () => {
    GetUserList()
  }
  const clearObjKey = (clearForm: any) => {
    Object.keys(clearForm).forEach((key: any) => {
      clearForm[key] = '';
    });
  }
  const onReset = () => {
    clearObjKey(UserForm)
    GetUserList()
  }

  const GetUserList = () => {
    reqGetUserListApi({
      "currentPage": pages.currentPage,
      "pageSize": pages.pageSize,
      "sortingFields": [
        {
          "field": "",
          "order": ""
        }
      ],
      "userName": UserForm.userName,
      "loginName": UserForm.loginName,
      "phoneNumber": UserForm.phoneNumber
    }).then(res => {
      // console.log(res, 'Userlist')
      tableData.value = res.data.records
      pages.total = res.data.total
    })
  }

  onMounted(() => {
    GetUserList()
  })
</script>

<style lang="scss" scoped>
  .user {}
</style>